<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>权限列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/static/css/oksub.css">
	<script type="text/javascript" src="/static/lib/loading/okLoading.js"></script>
</head>
<body class="ok-body-scroll">
<blockquote class="layui-elem-quote" style="margin: 15px 5px;">系统管理>后台设置>组织机构管理</blockquote>
<div class="ok-body">
	<div class="layui-row">
		<div class="layui-col-md2">
			<div id="permissionTree"></div>
		</div>
		<div class="layui-col-md10">
			<table class="layui-hide" id="permissionTable" lay-filter="tableFilter"></table>
		</div>
	</div>
</div>
<!--js逻辑-->
<script src="/static/lib/layui/layui.js"></script>
<script>
	layui.use(["element","jquery", "table", "laydate", "tree", "okLayer", "okUtils", "okMock"], function () {
		let table = layui.table;
		let laydate = layui.laydate;
		let tree = layui.tree;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;
		let okMock = layui.okMock;
        let $ = layui.jquery;
		okLoading.close();

		laydate.render({elem: '#startTime', type: "datetime"});
		laydate.render({elem: '#endTime', type: "datetime"});

		function initPermissionTree() {
			okUtils.ajax("/config/depts_list1/", "get", null, true).done(function (response) {
				tree.render({
					elem: '#permissionTree',
					data: response.data,
					showCheckbox: false,
					id: 'demoId1',
					isJump: true,
					click: function (obj) {
						// 做点什么？
                        let data = obj.data;
                        initPermissionTable(data);
					}
				});
				let data = {id:0};
				initPermissionTable(data);
			}).fail(function (error) {
				console.log(error)
			});
		}

		function initPermissionTable(data) {
			table.render({
				elem: '#permissionTable',
				url: '/config/depts_list/'+data.id,
                height:'full-120',
				limit: 20,
				page: true,
			    toolbar: "#toolbarTpl",
				size: "sm",
				cols: [[
				    {type: "checkbox", fixed: "left"},
					{field: "id", title: "ID", width: 70, sort: true, fixed: "left"},
					{field: "dept_code", title: "机构代码", width: 100},
					{field: "dept_name", title: "机构名称", width: 200},
                    {field: "tree_dept", title: "上级机构id", width: 200, hide:true},
                    {field: "dept_pname", title: "上级机构", width: 200},
                    {field: "remark_describe", title: "备注", width: 200},
					{field: "create_time", title: "创建时间", width: 200},
					{field: "now_status", title: "启用/停用", align:"center" ,width: 100, templet: "#typeTpl", fixed:"right"},
					{title: "操作", width:180, templet: "#operationTpl", align: "center", fixed: "right"}
				]],
				done: function (res) {
					// 做点什么？？？？？？？？？
				}
			});
		}
		initPermissionTree();
        //监听头工具栏事件
        table.on('toolbar(tableFilter)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    add();
                    break;
                case 'edit':
                    edit();
                    break;
            }
        });
        //
        table.on("tool(tableFilter)", function (obj) {
			let data = obj.data;
			switch (obj.event) {
				case "edit":
					edit(data);
					break;
				case "del":
					del(data);
					break;
			}
		});
        function add() {
			okLayer.open("添加机构", "{% url 'config:depts_insert_view' %}", "90%", "90%", null, function () {
			    table.reload('permissionTable');
			})
		}
        function edit(data) {
            okLayer.open("编辑机构", "{% url 'config:depts_edit_view' %}", "90%", "90%", function (layero,index) {
                let iframe = window['layui-layer-iframe' + index];
                iframe.child(data);
			});
        }
        function del(data) {
            let askMsg;
            if(data.now_status===0){
                askMsg="确定要停用吗？";
            }else{
                askMsg="确定要启用吗？";
            }
            okLayer.confirm(askMsg,function () {
                okUtils.ajax("/config/depts_del/"+data.id,"post",data.field, true).done(function (response) {
                    okUtils.tableSuccessMsg(response.msg);
                }).fail(function (error) {
                    // 这里已经有提示了
                    console.log(error);
                });
            });
        }
	});
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
        {% for i in data %}
        {% if i.menu_code == '50500101' %}
		    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add"><i class="layui-icon">&#xe608;</i>添加机构</button>
        {% endif %}
        {% endfor %}
	</div>
</script>
<!--行工具栏模板-->
<script type="text/html" id="operationTpl">
    {% for l in data %}
        {% if l.menu_code == '50500102' %}
          <a href="javascript:" title="编辑" lay-event="edit"><button class="layui-btn layui-btn-xs">修改</button></a>
    &nbsp;{% elif l.menu_code == '50500103' %}
           <a href="javascript:" title="启/停用" lay-event="del"><button class="layui-btn layui-btn-danger layui-btn-xs">启/停用</button></a>
        {% endif %}
    {% endfor %}
</script>

<script type="text/html" id="typeTpl">
    {% verbatim %}
	{{#  if(d.now_status == 0){ }}
	<span class="layui-btn layui-btn-xs">启用</span>
	{{#  } else if(d.now_status == 1) { }}
	<span class="layui-btn layui-btn-danger layui-btn-xs">停用</span>
	{{#  } }}
	{% endverbatim %}
</script>
</body>
</html>
